import React, { useState } from 'react'
import { View, Text, Image,Span,Button } from '@tarojs/components'
import PageWrapper from '@/components/PageWrapper'
import Popup from '@/components/Popup/Popup'
import './index.scss'
import {navigateTo} from "@/utils/navigation";

const Page = () => {
  const [visible, setVisible] = useState(false)
  return (
    <PageWrapper title="" showBack backgroundColor="#FE7407" color="#ffffff">
      <View className="my-service-page">
        <View className="my-service">
          <Image
            className="bg-img"
            src={require('../../../assets/home/coupon-bg.png')}
          />
        </View>

        <View className="box">
          <View className="title-item-box">
            <View className="coupon-box">
              <View className="coupon" onClick={() => setVisible(true)}>
                <View className="num">¥<Span>20</Span></View>
                <View className="title">新人专享券</View>
                <View className="but">领</View>
              </View>
              <View className="share" onClick={() => navigateTo('/pages/home/invite-coupon/index')}>
              </View>
            </View>

          </View>
          <View className="title-item-box">
            <View className="title-item">套餐购买</View>
            <View className="combo-box">
              <View className="coupon-item">
                <View className="coupon-title">10元x3张=15元</View>
                <View className="coupon-but">
                  <Text>立即</Text>
                  <Text>抢购</Text>
                </View>
              </View>
              <View className="coupon-item">
                <View className="coupon-title">10元x3张=15元</View>
                <View className="coupon-but">
                  <Text>立即</Text>
                  <Text>抢购</Text>
                </View>
              </View>
            </View>
          </View>
          <View className="title-item-box">
            <View className="title-item">说明信息：</View>
            <View className="dsc">
              新人专亭券，老用户不显示 分享赢好券:跳转到分享领券页面 分亭给5位新用户 判定新用户规则:数据下有手机号 分亭者可以获得“分
            </View>
          </View>
        </View>
      </View>
      <Popup
        visible={visible}
        title="新人专属福利"
        onClose={() => setVisible(false)}
      >
        <View className="pop-title">20元专享券</View>
        <View className="pop-img">
          <Image src={require('../../../assets/home/pop-coupon.png')}></Image>
        </View>
        <View className="pop-time">
          07 : 24 : 39 后过期
        </View>
        <View className="pop-but">立即领券</View>
      </Popup>
    </PageWrapper>
  )
}

export default Page
